﻿@page "/chat/{IdContact}"
@page "/chat"

<div class="d-flex flex-grow-1 flex-row">
	<MudPaper Elevation="25" Class="pa-3 ml-6" MinWidth="350px">
		<div class="d-flex flex-column px-4" style="max-height:70vh;min-height:70vh; overflow:scroll;">
			<MudTabs Elevation="2" Rounded="true" ApplyEffectsToContainer="true" PanelClass="pa-1" Centered="true">
				@* ************* Tab 1 ************* *@
				<MudTabPanel Text="@DashboardResource.StringUsers">
					<MudText>
						<MudToolBar Dense="true">
							<MudTextField T="string" ValueChanged="@(s=>OnSearchUsers(s))" Placeholder="@DashboardResource.StringSearch"
										  Class="mx-2" Label="@DashboardResource.StringSearch" Margin="Margin.Dense" Clearable
										  Variant="Variant.Outlined" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Search"
										  AdornmentColor="Color.Secondary" />
						</MudToolBar>
						@*<div class="d-flex flex-column px-4" style="max-height:70vh;min-height:70vh; overflow:scroll;">*@
						@* Clickable="true" *@
						<MudList T="List<GetUserViewModel>">
								@foreach (var user in ChatUsers)
								{
									<MudListItem T="string" Class="pa-0 px-3" OnClick="@(() => LoadUserChat(user))">
										<div class="d-flex flex-row mt-n1 mb-n1">
											<div class="mr-4">
												<MudBadge Dot="true" Overlap="true" Visible="false" Color="Color.Error" Class="my-2">
													<MudAvatar Image="@("data:image/png;base64," + Convert.ToBase64String(user.Avatar))" Size="Size.Medium" />
												</MudBadge>
											</div>
											<div class="my-1 mx-2">
												<MudText Typo="Typo.body2" Class="mt-3 mb-n2">@user.Name</MudText>
												<MudText Typo="Typo.caption" Style="font-size: xx-small!important;">@user.UserDepartmentsTitle</MudText>
											</div>
										</div>
									</MudListItem>
								}
							</MudList>
						@*</div>*@
					</MudText>
				</MudTabPanel>
				@* ************* Tab 2 ************* *@
				<MudTabPanel Text="@($"{DashboardResource.StringChats}  ...")" BadgeData="0" BadgeColor="Color.Error">
					<MudText>
						<MudToolBar Dense="true">
							<MudTextField T="string" ValueChanged="@(s=>OnSearchChats(s))" Placeholder="@DashboardResource.StringSearch"
										  Class="mx-2" Label="@DashboardResource.StringSearch" Margin="Margin.Dense" Clearable
										  Variant="Variant.Outlined" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Search"
										  AdornmentColor="Color.Secondary" />
						</MudToolBar>
					</MudText>
				</MudTabPanel>
			</MudTabs>
		</div>
		<MudCardActions>
			<MudFab Color="Color.Secondary" StartIcon="@Icons.Material.Filled.Edit" />
		</MudCardActions>
	</MudPaper>
	@* *********************************************************** *@
	<MudPaper Elevation="25" Class="py-4 flex-grow-1">
		<MudToolBar Dense="true">
			@if (string.IsNullOrEmpty(IdContact))
			{
				<MudIcon Icon="@Icons.Material.Outlined.Person" Style="margin-right:10px"></MudIcon>
				<MudText Typo="Typo.h6">@DashboardResource.StringChat</MudText>
			}
			else
			{
				<MudIcon Icon="@Icons.Material.Outlined.ChatBubble" Style="margin-right:10px"></MudIcon>
				<MudText Typo="Typo.h6">@ContactUser?.Name</MudText>
			}
		</MudToolBar>
		<div class="d-flex flex-column px-4" style="max-height:65vh;min-height:65vh; overflow:scroll;">
			@foreach (var item in Messages)
			{
				if (item?.IdFromUser == CurrentIdUser)
				{
					<MudText Align="Align.Right" Class="flex-row my-4">
						<MudText Typo="Typo.body2" Style=" padding: 15px;background-color: var(--mud-palette-background-grey);border-radius: 10px;margin-top:5px">
							@item.Message
							<br>
							<MudText Typo="Typo.caption" Style="font-size: xx-small!important;">@item.SendDate.ToDateString()</MudText>
							<MudText Typo="Typo.caption" Style="font-size: xx-small!important;">@item.SendDate.ToTimeString()</MudText>
						</MudText>
					</MudText>
				}
				else
				{
					<MudText Align="Align.Left" Class="flex-row my-4">
						<MudText Typo="Typo.caption">@item?.FromUser?.Name</MudText>
						<MudText Typo="Typo.body2" Style=" padding: 15px;background-color: #E8F5E9;border-radius: 10px;margin-top:5px">
							@item.Message
							<br>
							<MudText Typo="Typo.caption" Style="font-size: xx-small!important;">@item.SendDate.ToDateString()</MudText>
							<MudText Typo="Typo.caption" Style="font-size: xx-small!important;">@item.SendDate.ToTimeString()</MudText>
						</MudText>
					</MudText>
				}
			}
		</div>
		<MudPaper Elevation="25" Class="d-flex flex-row px-2 mx-4" Style="">
			<MudTextField T="string" Placeholder="@($"{DashboardResource.StringMessageEnterYourMessage}")" DisableUnderLine="true"
						  Class="mt-n2 mx-4" @bind-Value="CurrentMessage" For="@(()=> CurrentMessage)"
						  Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Message" AdornmentColor="Color.Warning"
						  OnKeyPress="CurrentMessageKeypress" Immediate="true" />
			<MudButton OnClick="SubmitAsync" StartIcon="@Icons.Material.Outlined.Send" Color="Color.Secondary" ButtonType="ButtonType.Button">
				@DashboardResource.StringSend
			</MudButton>
		</MudPaper>
	</MudPaper>
</div>
